<template>
	<view class="detail container">
		<view class="banner">
			<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
					<swiper-item v-for="item in pictureList" :key="item.pictureId">
							<image :src="item.pictureUrl" mode="" class="banner-img"></image>
					</swiper-item>
			</swiper>
		</view>
		<view class="tip">
			<text class="tip-l">下单后3个工作日发货</text>
			<text class="tip-r">12月30日00点结束</text>
		</view>
		<view class="pro-base">
			<view class="name">
				<text class="name-l">{{commodityInfo.commodityName}}</text>
				<text class="name-r">包邮</text>
			</view>
			<view class="price">
				<view class="price-l">
					<text class="p1">¥{{commodityInfo.marketingPrice}}</text>
					<text class="p2">¥{{commodityInfo.marketPrice}}</text>
				</view>
				<view class="price-r">
					<view class="color1">可获得积分：{{commodityInfo.integral}}</view>
					<view><text class="p4">销量：{{commodityInfo.commodityBuyAmount}}件</text></view>
				</view>
			</view>
			<view class="disco">
				<view class="disco-l">
					<text class="l1">VIP</text>
					<text class="l2">尊享价</text>
					<text class="l3">仅需支付{{commodityInfo.vipPrice}}</text>
				</view>
				<view class="disco-r">
					<text class="r1">开通会员即可享受</text>
				</view>
			</view>
		</view>
		<!-- 平台保障 -->
		<view class="bao">
			<view class="bao-l">平台保障</view>
			<view class="bao-r">商品检测报告·防假保单·供应链营业执照</view>
		</view>
		<!-- 评论 -->
		<view class="comment">
			<view class="comment-title">
				<view class="title-1">用户评论 (2)</view>
				<view class="title-r" @click="toComment">查看全部</view>
			</view>
			<view class="comment-cont">
				<view class="av">
					<view class="av-l">
						<image src="" mode=""></image>
						<text>de*</text>
					</view>
					<view class="av-r">2018-12-15 15:32</view>
				</view>
				<view class="grade">
					<view class="grade-l">规格：常规</view>
					<view class="grade-r">口碑好评</view>
				</view>
				<view class="cont">
					这次这个洗衣液秒杀，秒到了很开心。
				</view>
			</view>
		</view>
		<!-- 商品详情 -->
		<view class="content">
			<view class="content-top">
				<view class="color1">图文详情</view>
				<view>商品参数</view>
				<view>购买须知</view>
			</view>
			<view class="content-cont">
				<rich-text :nodes="commodityContent"></rich-text>
			</view>
		</view>
		<!-- 底部导航 -->
		<view class="bottom">
			<view class="button button1">
				<text>首页</text>
				<text>购物车</text>
			</view>
			<view class="button button2">
				<text @click="showPopup('add')">加购物车</text>
			</view>
			<view class="button button3">
				<text @click="showPopup('buy')">立即购买</text>
			</view>
			<view class="share">
				<text>分享</text>
			</view>
		</view>
		<!-- 规格弹框 -->
		<uni-popup type="bottom" :show="specPopup" v-on:hidePopup="hidePopup">
			<view class="spec">
				<view class="spec-cont">
					<view class="sc-l">
						<image src="" mode=""></image>
					</view>
					<view class="sc-c">
						<view>保暖防风加厚羽绒服保暖保暖防风加厚羽绒服保暖</view>
						<view class="color1">￥{{marketingPrice}}</view>
						<view><text class="color9">库存：</text><text class="size24">{{inventoryAmount}}</text></view>
					</view>
					<view class="sc-r">
						<view @click="hidePopup">X</view>
						<view>可得积分：{{integral}}</view>
					</view>
				</view>
				<view class="spec-ul">
					<view class="spec-li" v-for="(item, i) in specList" :key="item.specId">
						<view class="li-title">{{item.specName}}</view>
						<view class="li-cont">
							<text class="li-item"
								v-for="(item1, i1) in item.optionList" 
								:class="{'select': selectId[i] == item1.optionId}"
								:key="item1.optionId" @click="setSpecValue(i, item1.optionId, item1.optionName)">{{item1.optionName}}</text>
						</view>
					</view>
				</view>
				<view class="number">
					<view class="number-l">购买数量</view>
					<view class="number-r">
						<uni-number-box :min="1" v-on:change="onNumberChange" :value="number"></uni-number-box>
					</view>
				</view>
				<button class="specbtn" @click="specConfirm">确定</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Api from '../../../util/api.js'
	import uniPopup from '../../../components/uni-popup.vue'
	import uniNumberBox from '../../../components/uni-number-box.vue'
	import { mapActions } from 'vuex'
	export default {
		data() {
			return {
				commodityId:'',
				commodityInfo: '',
				pictureList:[],
				indicatorDots: false,
				autoplay: false,
				interval: 5000,
				duration: 1000,
				specPopup: false,
				specList: [],
				commoditySpecList:[],
				selectId: [],
				selectValue: [],
				commoditySpecId:'',
				number: 1,
				bottomClickType: '',
				marketingPrice: 0, //规格默认价格
				inventoryAmount:0,  //规格默认库存
				integral:0,//规格默认积分
				commodityContent:'',
			};
		},
		onLoad: function (option) { 
			this.commodityId = option.commodityId;
			this.getData();
			this.getSpecData();
			this.getContent();
		},
		methods: {
			...mapActions(['orderConfirm']),
			
			getData(){
				Api.fetchPost('/fsbus/M2102',{commodityId: this.commodityId}).then(res=>{
					if(res.errorNo == 0){
						this.commodityInfo = res.results.commodityInfo;
						this.pictureList = res.results.pictureList;
						this.marketingPrice = this.commodityInfo.marketingPrice;
					}
				}).catch(err=>{})
			},
			getSpecData(){
				Api.fetchPost('/fsbus/M2103',{commodityId: this.commodityId}).then(res=>{
					if(res.errorNo == 0){
						this.specList = res.results.specList;
						this.commoditySpecList = res.results.commoditySpecList;
						for(var i=0; i<this.specList.length;i++){
							this.selectId.push('');
							this.selectValue.push('');
						}
					}
				}).catch(err=>{
				})
			},
			getContent(){
				Api.fetchPost('/fsbus/M2104',{commodityId: this.commodityId}).then(res=>{
					if(res.errorNo == 0){
						this.commodityContent =res.results.data.commodityContent;
					}
				}).catch(err=>{})
			},
			setSpecValue(i,id,value){
				this.$set(this.selectId,i,id);
				this.$set(this.selectValue,i,value)
				for(var i=0; i< this.commoditySpecList.length; i++) {
					if(JSON.stringify(this.commoditySpecList[i].specOptionIdList) == JSON.stringify(this.selectId)){
						this.commoditySpecId = this.commoditySpecList[i].commoditySpecId;
						this.marketingPrice = this.commoditySpecList[i].marketingPrice;
						this.inventoryAmount = this.commoditySpecList[i].inventoryAmount;
						this.integral = this.commoditySpecList[i].integral;
					}
				}
			},
			specConfirm(){
				if(this.commoditySpecId == ''){
					return false;
				}
				
				if(this.bottomClickType == 'add') {
					/* 加入购物车 */
					Api.fetchPost('/fsbus/M2209',{
						commoditySpecId: this.commoditySpecId,
						amount: this.number
					}).then(res=>{
						if(res.errorNo == 0){
							this.hidePopup();
							uni.showToast({
									title: '加入购物车成功',
									duration: 2000
							});
						}
					}).then(err=>{
					})
				}else if(this.bottomClickType == 'buy'){
					/* 购买*/
					let productList = [];
					var params = {};
					params.commodityId = this.commodityId;
					params.commoditySpecId = this.commoditySpecId;
					params.commoditySpecValue = this.selectValue.join(',');
					params.buyAmount = this.number;
					params.marketingPrice = this.marketingPrice;
					params.cartId = '';
					params.commodityName = this.commodityInfo.commodityName;
					params.commodityPicture = this.commodityInfo.commodityPicture;
					productList.push(params);
					/* 将数据存储到vuex，确认订单页面的时候取出 */
					this.orderConfirm(productList);
					uni.navigateTo({
							url: '/pages/product/orderConfirm/orderConfirm'
					});
				}
				
			},
			onNumberChange(value){
				this.number = value;
			},
			//展示底部 popup
			showPopup(type) {
				this.specPopup = true;
				this.bottomClickType = type;
			},
			//统一的关闭popup方法
			hidePopup() {
				this.specPopup = false;
			},
			toComment(){
				uni.navigateTo({
						url: '/pages/product/comment/comment'
				});
			},
		},
		components: {
			uniPopup,
			uniNumberBox
		}
	}
</script>

<style>
	body,page {
		background-color: #f3f3f3;
		overflow:hidden;
	}
	.detail {
		font-size: 26upx;
		width: 100%;
		min-height: 100%;
		position: absolute;
	}
	.banner {
		width: 100%;
		height: 800upx;
		background-color: #C0C0C0;
	}
	uni-swiper {
		height: 800upx;
	}
	swiper {
		height: 800upx;
	}
	.banner-img {
		width: 100%;
		height: 100%;
	}
	.tip {
		width: 100%;
		height: 61upx;
		background-color: #656565;
		color: #fff;
		line-height: 61upx;
		padding: 0 20upx;
	}

	.tip .tip-l {
		float: left;
	}

	.tip .tip-r {
		float: right;
	}
	.pro-base {
		background-color: #fff;
		padding: 10upx 0;
	}
	.name {
		padding: 0 20upx;
		height: 60upx;
		line-height: 60upx;
	}

	.name .name-l {
		font-size: 30upx;
		color: #333;
		float: left;
	}

	.name .name-r {
		font-size: 24upx;
		color: #999;
		float: right;
	}

	.price {
		display: flex;
		padding: 0 20upx;
		height: 72upx;
		margin-bottom: 30upx;
	}

	.price .price-l {
		flex: 1;
		line-height: 72upx;
	}

	.price .price-c {
		width: 180upx;
		height: 40upx;
		line-height: 40upx;
		border-left: 1upx solid #999;
		margin-top: 10upx;
		margin-left: 20upx;
		padding-left: 20upx;
	}

	.price .price-r {
		width: 180upx;
		text-align: right;
		line-height: 36upx;
	}

	.price .p1 {
		font-size: 54upx;
		color: #333;
	}

	.price .p2 {
		font-size: 24upx;
		color: #333;
		text-decoration: line-through;
		margin-left: 10upx;
	}

	.price .p3 {
		color: #F52A4C;
		font-size: 36upx;
	}

	.price .p4 {
		font-size: 24upx;
		color: #999;
	}

	.disco {
		color: #333;
		font-size: 24upx;
		padding: 0 20upx;
		margin-bottom: 20upx;
		display: flex;
	}
	.disco .disco-l {
		flex: 1;
	}
	.disco .disco-r{
		width: 40%;
	}
	.disco .l1 {
		background-color: #777777;
		border-radius: 6upx;
		color: #fff;
		padding: 3upx 8upx;
		margin-right: 20upx;
	}
	.disco .l3 {
		background-color: #F52A4C;
		padding: 10upx 15upx;
		color: #fff;
		margin-left: 20upx;
		border-radius: 2upx;
		position: relative;
	}
	.disco .l3:before {
		content: '';
		width: 0;
		height:0;
		border-top:10upx solid transparent;
		border-bottom: 10upx solid transparent;
		border-right: 10upx solid #F52A4C;
		position: absolute;
		left: -10upx;
		top: 16upx;
	}
	.disco .r1 {
		float: right;
	}
	
	.bao {
		height: 100upx;
		background-color: #fff;
		margin-top: 20upx;
		padding: 0 20upx;
		line-height: 100upx;
		display: flex;
	}
	.bao-l {
		width: 150upx;
		font-size: 26upx;
	}
	.bao-r {
		flex: 1;
		text-align: right;
		color: #161EC3;
	}
	
	.comment {
		background-color: #fff;
		margin-top: 20upx;
		padding: 0 20upx;
	}
	.comment-title {
		line-height: 100upx;
		display: flex;
	}
	.comment-title .title-1 {
		flex: 1;
	}
	.comment-title .title-r {
		width: 150upx;
		text-align: right;
	}
	.comment .av {
		height: 80upx;
		line-height: 80upx;
		display: flex;
	}
	.comment .av-l {
		flex: 1;
		overflow: hidden;
	}
	
	.comment .av-l image {
		width: 55upx;
		height: 55upx;
		background-color: #A2A2A2;
		border-radius: 100%;
		vertical-align: center;
		float: left;
		margin-top: 12upx;
		margin-right: 20upx;
	}
	.comment  .av-r {
		width: 250upx;
		color: #999;
		text-align: right;
	}
	.comment .grade {
		height: 80upx;
		line-height: 80upx;
		display: flex;
	}
	.comment .grade-l {
		width: 150upx;
		color: #666;
		font-size: 22upx;
	}
	.comment .grade-r {
		color: #F52A4C;
		font-size: 26upx;
		flex: 1;
		text-align: right;
	}
	.comment .cont {
		min-height: 100upx;
		color: #666;
	}
	.content {
		margin-top: 20upx;
	}
	.content-top {
		width: 100%;
		height: 120upx;
		background-color: #fff;
		line-height: 120upx;
		display: flex;
	}
	.content-top>view {
		flex: 1;
		text-align: center;
		font-size: 30upx;
	}
	.content-cont {
		padding: 30upx;
	}
	.bottom {
		width: 100%;
		height: 100upx;
		position: fixed;
		bottom: 50upx;
		color: #fff;
		padding: 0 20upx;
	}
	.bottom .button {
		height: 100upx;
		box-shadow: 0px 9px 8px 0px #CCCCCC;
		float: left;
		display: flex;
		line-height: 100upx;
		text-align: center;
		color: #B6B6B6;
		border-radius: 8upx;
		margin-right:15upx;
	}
	.bottom .button.button1 {
		width: 276upx;
		background-color: #4C4C4C;
	}
	.bottom .button.button2 {
		width: 130upx;
		background-color: #F8803E;
		color: #fff;
		display: flex;
    justify-content: center;
	}
	.bottom .button.button3 {
		width: 140upx;
		background-color: #F52A4C;
		color: #fff;
		display: flex;
		justify-content: center;
	}
	.bottom .button1 text {
		display: inline-block;
		width: 50%;
		height: 100upx;
	}
	.bottom .share {
		width:100upx;
		height:100upx;
		background-color: #4C4C4C;
		box-shadow:0px 9px 8px 0px #CCCCCC;
		border-radius: 100upx;
		float: right;
		line-height: 100upx;
		text-align: center;
	}
	.spec {
		padding: 20upx 30upx;
	}
	.spec-cont {
		display: flex;
	}
	.spec-cont>view {
		overflow: hidden;
	}
	.spec-cont .sc-l {
		width: 150upx;
		height: 150upx;
		margin-right: 40upx;
	}
	.spec-cont .sc-l image {
		width: 100%;
		height: 100%;
		background-color: #A2A2A2;
	}
	.spec-cont .sc-c {
		flex: 1;
		text-align: left;
	}
	.spec-cont .sc-c view:first-child {
		height: 80upx;
	}
	.spec-cont .sc-c .color1 {
		font-size: 30upx;
	}
	.spec-cont .sc-c .color9 {
		font-size: 24upx;
	}
	.spec-cont .sc-r {
		width: 150upx;
		text-align: right;
	}
	.spec-cont .sc-r view:last-child {
		margin-top: 90upx;
		color: #F52A4C;
		font-size: 24upx;
	}
	.spec-ul {
		margin: 30upx 0;
	}
	.spec-ul .li-title {
		font-size: 30upx;
		color: #000;
		line-height: 70upx;
	}
	.spec-ul .li-item {
		display: inline-block;
		padding: 10upx 20upx;
		background-color: #EAEAEA;
		margin: 0 20upx 20upx 0;
		border-radius: 8upx;
		min-width: 82upx;
		text-align: center;
		border: 1px solid #EAEAEA;
	}
	.spec-ul .li-item.select {
		background-color: #C4C4C4;
		border: 1px solid #696969;
	}
	.number {
		display: flex;
	}
	.number .number-l {
		flex: 1;
	}
	.number .number-r {
		width: 200upx;
		line-height: 70upx;
	}
	.specbtn {
		width: 620upx;
		height: 100upx;
		line-height: 100upx;
		background-color: #505050;
		border: 0;
		color: #fff;
		margin-top: 40upx;
		margin-bottom: 20upx ;
		font-size: 26upx;
	}
</style>
